<template>
  <transition name="fade">
    <div v-if="show" class="plugin-menu-back" ref="back"  @click = "close" @contextmenu.prevent="close">
		<div class="plugin-menu-con" :style="`position:absolute;left:${e.clientX}px;top:${e.clientY}px;`">
			<div :style="`color:${item.color};`" v-if="item.text" v-for="(item,index) in list.array" :key="'plugin-menu-item' + index" class="plugin-menu-item" @click.stop="click(item,index)">{{item.text}}</div>
		</div>
    </div>
  </transition>
</template>

<script type="text/babel">
export default {
  data() {
    return {
	  show: false,
	  e:{},
	  list:{}
    };
  },

  computed: {},
  watch: {},
  methods: {
	init(){
		
	},
	click(item,index){
		if(this.list.click){
			this.list.click(item,index)
		}
		this.close()
	},
    close() {
      this.show = false;
	},
    keydown(e) {
      if (!this.show) {
        return;
      }

      e.preventDefault();

      if (e.keyCode === 27) {
        // esc关闭消息
        if (this.show) {
          this.close();
        }
      }
    },
  },
  mounted() {
	let that = this
    document.addEventListener("keydown", this.keydown);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.keydown);
  }
};
</script>

<style scoped>
.plugin-menu-back {
  position: fixed;
  z-index: 3000;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  /* background: rgba(0, 0, 0, 0.2); */
  overflow: hidden;
}

.plugin-menu-back .plugin-menu-con{
	background: #fff;
	width: 240px;
	box-shadow: 4px 2px 2px #888888;
}

.plugin-menu-back .plugin-menu-item{
	background: #fff;
	height: 30px;
	line-height: 30px;
	border-bottom: 1px solid #ddd;
	padding: 0 20px;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.plugin-menu-back .plugin-menu-item:hover{
	background: #eee;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .07s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

